<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  value: {
    type: Object,
    default: () => {}
  }
})
const chart = ref(null)
const setOptions = (item) => {
  if (item === undefined) return
  const option = {
    title: {
      text: '故障率',
      subtext: item.failurerate + '%',
      x: 'center',
      y: 'center',
      top: '43%',
      textStyle: {
        color: 'rgba(137, 149, 203, 1)',
        fontSize: 18,
        fontWeight: '400',
        fontFamily: 'hzgb'
      },
      subtextStyle: {
        color: 'rgba(137, 149, 203, 1)',
        fontSize: 30,
        fontWeight: '400',
        fontFamily: 'hzgb'
      }
    },
    tooltip: {
      show: true,
      formatter: (name) => {
        return `${name.marker}${name.name}: ${name.value}%`
      }
    },
    // legend: {
    //   x: 'center',
    //   y: 'bottom',
    //   data: ['故障率', '未故障率']
    // },
    calculable: true,
    series: [
      {
        name: '设备故障统计',
        type: 'pie',
        radius: ['60%', '70%'],
        center: ['50%', '50%'],
        labelLine: {
          show: true,
          length: 70,
          length2: 80
        },
        // roseType: 'area',
        data: [
          // 未故障率
          {
            value: item.no_faultrate,
            name: item.no_fault,
            label: {
              normal: {
                labelLine: {
                  normal: {
                    // length: 15, // 指示线长度
                    lineStyle: {
                      color: 'rgba(119, 138, 228, 1)' // 指示线颜色
                    }
                  }
                },
                textStyle: {
                  color: '#1fa6fd', // 提示文字颜色
                  fontSize: 20 // 提示文字大小
                },
                formatter: '{c}%\n'
              }
            },
            itemStyle: {
              normal: {
                //颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(2, 155, 253, 1)' },
                  { offset: 1, color: 'rgba(59, 176, 253, 1)' }
                ])
              }
            }
          },
          // 故障率
          {
            value: item.failurerate,
            name: item.failure,
            label: {
              normal: {
                labelLine: {
                  normal: {
                    // length: 15, // 指示线长度
                    lineStyle: {
                      color: 'rgba(255, 146, 146, 1)' // 指示线颜色
                    }
                  }
                },
                textStyle: {
                  color: 'rgba(255, 146, 146, 1)', // 提示文字颜色
                  fontSize: 20 // 提示文字大小
                },
                formatter: '{c}%\n',
                padding: [0, -70]
              }
            },
            itemStyle: {
              normal: {
                //颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(255, 148, 148, 1)' },
                  { offset: 1, color: 'rgba(255, 105, 106, 1)' }
                ])
              }
            }
          }
        ]
      }
    ]
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions()
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
watch(
  () => props.value,
  () => {
    setOptions(props.value)
  }
)
</script>

<style lang="scss" scoped>
</style>
